<template>
  <view class="main">
    <view class="top">
      <checkbox-group @change="checkAll">
        <label>
          <checkbox value="122222" :checked="allSelected" activeBackgroundColor="#71cec5" iconColor="#fff" activeBorderColor="#71cec5" />
          <text>全选</text>
        </label>
      </checkbox-group>
      <view>共 {{ goodsList.length }}件商品 </view>
    </view>

    <checkbox-group @change="itemCheck" v-if="goodsList.length > 0">
      <view v-for="item in goodsList">
        <view class="box">
          <checkbox :checked="item.checked" :value="item.id" activeBackgroundColor="#71cec5" iconColor="#fff" activeBorderColor="#71cec5" />
          <view>
            <!-- <view class="top1">
              <u-avatar src="" size="20"></u-avatar>
              杭州一星阿打算打 <u-icon name="arrow-right"></u-icon>
            </view> -->
            <view class="item">
              <image :src="item.picurl" class="left" mode="aspectFill" />
              <view class="right">
                <view class="title">{{ item.title }} </view>
                <view class="price">
                  <view class="p"><text>￥</text> {{ item.price }}</view>
                  <u-number-box :step="1" button-size="28" :min="1" :name="item.id" v-model="item.goodSum">
                    <template #minus>
                      <view class="btn" @click="numFn(item.goodSum, 'CUT', item.id)"> - </view>
                    </template>
                    <template #plus>
                      <view class="btn" @click="numFn(item.goodSum, 'ADD', item.id)"> + </view>
                    </template>
                  </u-number-box>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </checkbox-group>
    <view v-if="goodsList.length <= 0" style="width: 100%; margin-top: 40rpx; display: flex; justify-content: center">
      <u-empty mode="car"></u-empty>
    </view>
    <view class="bottomBox">
      <view class="l">
        <u-icon name="trash" size="30" @click="delFn" color="#71cec5" style="margin-right: 10rpx"></u-icon>
        合计：<view class="p"><text>￥</text> {{ totalNumber }}</view>
      </view>
      <u-button @click="confirmOrder" shape="circle" type="primary" style="width: 200rpx" color="#71cec5">结算</u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { deleteBuyCar, editBuyCarCount, selectBuyCarLst } from "@/api/order";
import { useStore } from "@/stores/counter";
import { goPage } from "@/utils/commonFn";
import { ref, computed, onMounted } from "vue";

const goodsList = ref<any[]>([]);
onMounted(async () => {
  const userId = uni.getStorageSync("userId");
  if (!userId) {
    uni.redirectTo({ url: "/pages/login/login" });
    return;
  }
  getList();
});
const getList = async () => {
  const res = await selectBuyCarLst({
    userId: uni.getStorageSync("userId"),
  });
  res.buyCarLst.forEach((i: any) => (i.checked = false));
  goodsList.value = res.buyCarLst;
};
const totalNumber = computed(() => {
  let arrs = goodsList.value.filter((item) => item.checked); //筛选出选择的
  console.log(arrs);
  let num: number = 0;
  arrs.forEach((i) => {
    num += i.price * i.goodSum;
  });
  return num;
});
const allSelected = ref(false);
const checkAll = (v: any) => {
  if (v.detail.value.length > 0) {
    goodsList.value.forEach((o) => (o.checked = true)); // 如果全选，那么每一个都选择
  } else {
    goodsList.value.forEach((o) => (o.checked = false)); // 否则，每一个都不选择
  }
};
const numFn = async (num: number, type: "ADD" | "CUT", Id: string) => {
  console.log(num);
  if (num === 1 && type === "CUT") {
    return;
  }
  await editBuyCarCount({
    type,
    Id,
  });
};
const itemCheck = (v: any) => {
  const values: string[] = v.detail.value;
  if (values.length <= 0) {
    allSelected.value = false;
    return;
  }
  goodsList.value.forEach((i) => {
    i.checked = values.includes(i.id);
  });
  allSelected.value = goodsList.value.every((i) => i.checked);
};
const confirmOrder = () => {
  useStore().setGoodsInfo(goodsList.value.filter((item) => item.checked));

  goPage("/pages/shop/goodsDetails/goodOrder?type=car");
};
const delFn = async () => {
  let arrs = goodsList.value.filter((item) => item.checked);
  if (arrs.length <= 0) {
    uni.showToast({
      title: "请选择您要删除的商品",
      icon: "none",
    });
    return;
  }
  uni.showModal({
    title: "提示",
    content: "您确定要删除改商品吗",
    success: async function (res) {
      if (res.confirm) {
        await deleteBuyCar({ Id: arrs.map((i) => i.id).join(",") });
        uni.showToast({
          title: "删除成功",
          icon: "success",
          position: "top",
          success() {
            setTimeout(() => {
              getList();
            }, 300);
          },
        });
      }
    },
  });
};
</script>

<style scoped lang="less">
:deep(.uni-checkbox-input) {
  border-radius: 50rpx !important;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
}
.box {
  display: flex;
  align-items: center;
  background: #fff;
  margin: 50rpx 0;
  padding: 30rpx;
  border-radius: 20rpx;
  .top1 {
    display: flex;
    align-items: center;
    gap: 15rpx;
    margin-bottom: 20rpx;
  }
  .item {
    display: flex;
    width: 100%;
    .left {
      width: 140rpx;
      height: 140rpx;
      background: saddlebrown;
      margin-right: 15rpx;
    }
    .right {
      width: calc(100vw - 320rpx);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 28rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 设置为想要的行数 */
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .price {
        display: flex;
        color: #fe5100;
        justify-content: space-between;
        text {
          font-size: 22rpx;
          margin-right: -10rpx;
        }
      }
    }
  }
}
.bottomBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  .l {
    width: calc(100% - 200rpx);
    display: flex;
    align-items: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #9694ae;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    .p {
      color: #fe5100;
      font-size: 38rpx;
      text {
        font-size: 24rpx;
        margin-right: -10rpx;
      }
    }
  }
}
.btn {
  width: 50rpx;
  height: 50rpx;
  background-color: #f3f4f6;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  font-size: 40rpx;
  font-weight: bold;
}
</style>
